<template>
  <div class="search-info-list">
    <template v-if="loadingIsShow">
      <van-loading type="spinner" class="loading" />
    </template>
    <template v-else>
      <!-- 头部歌单信息 -->
      <div class="song-info">
        <!-- 左侧歌单封面 -->
        <div class="song-info-pic">
          <img :src="songLetter.playlist.coverImgUrl" />
        </div>
        <!-- 右侧歌单介绍 -->
        <div class="song-info-letter">
          <!-- 名称 -->
          <div class="song-info-name">
            <div>歌单</div>
            <span>{{ songLetter.playlist.name }}</span>
          </div>
          <!-- 作者 创建时间 -->
          <div class="song-info-user">
            <img :src="songLetter.playlist.creator.avatarUrl" />
            <span>{{ songLetter.playlist.creator.nickname }}</span>
            <span
              >20{{
                formatDate(
                  new Date(songLetter.playlist.createTime),
                  "YYYY-MM-dd"
                )
              }}创建</span
            >
          </div>
          <!-- 操作 -->
          <div class="song-info-handle">
            <play-all-vue></play-all-vue>

            <!-- 收藏 -->
            <div style="margin-left: 8px">
              <button-component-vue
                :buttonDataSubscribed="buttonDataSubscribed"
              ></button-component-vue>
            </div>
            <div style="margin-left: 8px">
              <button-component-vue
                :buttonDataSubscribed="buttonDataShare"
              ></button-component-vue>
            </div>
            <div style="margin-left: 8px">
              <button-component-vue
                :buttonDataSubscribed="buttonDownload"
              ></button-component-vue>
            </div>
          </div>
          <!-- 歌曲数量及播放数量 -->
          <div class="song-info-plus">
            <div
              class="song-info-lable"
              v-if="songLetter.playlist.tags.length > 0"
            >
              <span>标签：</span>
              <span
                v-for="(item, index) in songLetter.playlist.tags"
                :key="index"
                :style="index > 0 ? 'margin:2px' : ''"
                >{{ item }}
                <i v-show="index != songLetter.playlist.tags.length - 1"
                  >/</i
                ></span
              >
            </div>
            <div class="song-info-num">
              <span> 歌曲：{{ songLetter.playlist.trackCount }} </span>
              <span>
                播放：{{ unitConversion(songLetter.playlist.playCount) }}
              </span>
            </div>
            <div
              class="song-info-brief"
              v-if="songLetter.playlist.description != null"
            >
              <span class="brief-info" :title="songLetter.playlist.description"
                >简介：{{ songLetter.playlist.description }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 歌曲 indexBar 组件 -->
      <div class="song-list-index-bar">
        <index-bar-vue
          :indexBarData="indexBarData"
          :skipName="skipName"
        ></index-bar-vue>
      </div>
      <!-- 歌曲列表组件 -->
      <router-view></router-view>
    </template>
  </div>
</template>

<script setup>
import { ref, watch, reactive } from "vue";
import { useStore } from "vuex";
import axios from "axios";
import buttonComponentVue from "../button/buttonComponent.vue";
import indexBarVue from "../indexBar/indexBar.vue";
import playAllVue from "../playAll/playAll.vue";
import { formatDate } from "../../hook/formatTime";
import unitConversion from "../../hook/unitConversion";

const store = useStore();

// 时间戳
const nowTime = new Date().getTime()

// 歌单操作按钮赋值(收藏 分享 下载)
const buttonDataSubscribed = ref("");
const buttonDataShare = ref("");
const buttonDownload = ref("");

// 选中歌单介绍信息
const songLetter = ref("");

// 歌单动态信息
const songDynamic = ref("");

// loading
const loadingIsShow = ref(true);

// 判断是否为收藏歌单
const isSubscribed = (isSubscribed, num, text) => {
  if (isSubscribed == true) return `已${text}(${unitConversion(num)})`;
  return `${text}(${unitConversion(num)})`;
};

// 获取歌单的介绍信息（封面 作者）
const getSongListUser = async () => {
  await axios
    .get(
      `/playlist/detail?id=${store.state.m_song.songListId}&cookie=${store.state.m_user.cookie}`
    )
    .then((res) => {
      songLetter.value = res.data;
    })
    .catch((err) => {
      console.error(err);
    });
};
getSongListUser();

// 获取歌单的动态详情（评论数 是否收藏）
const getSongListComment = async () => {
  await axios
    .post(
      `/playlist/detail/dynamic?id=${store.state.m_song.songListId}&cookie=${store.state.m_user.cookie}&timestamp=${nowTime}`
    )
    .then((res) => {
      songDynamic.value = res.data;
    })
    .catch((err) => {
      console.error(err);
    });
};
getSongListComment();

// 监听请求是否完成
watch(
  () => songLetter.value,
  () => {
    if (songLetter.value != "") {
      loadingIsShow.value = false;
    }
  },
  { deep: true, immediate: true }
);

const indexBarData = ref("");

const skipName = reactive([
  "singList", // 歌单列表
  "singComment", // 评论
  "singCollector", // 收藏
]);
// 监听 songDynamic.value.commentCount 的值 赋值后传递
watch(
  () => songDynamic.value.commentCount,
  (newV) => {
    if (newV >= 0) {
      // 传给 indexBar 的值
      indexBarData.value = [
        "歌曲列表",
        `评论(${songDynamic.value.commentCount})`,
        "收藏者",
      ];
      // 传递给 button
      buttonDataSubscribed.value = [
        "iconfont icon-tianjiawenjian",
        `${isSubscribed(
          songDynamic.value.subscribed,
          songDynamic.value.bookedCount,
          "收藏"
        )}`,
      ];
      buttonDataShare.value = [
        "iconfont icon-fenxiang",
        `${isSubscribed(
          songDynamic.value.subscribed,
          songDynamic.value.shareCount,
          "分享"
        )}`,
      ];
      buttonDownload.value = ["iconfont icon-xiazai", "下载全部"];
    }
  },
  { deep: true, immediate: true }
);
</script>
<style lang='less'>
.song-info {
  display: flex;

  .song-info-pic {
    width: 185px;
    height: 185px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
  }

  .song-info-letter {
    display: flex;
    flex-direction: column;
    margin-left: 20px;

    .song-info-name {
      div:nth-child(1) {
        width: 35px;
        border-radius: 3px;
        height: 20px;
        border: 1px solid #ec4141;
        color: #ec4141;
        line-height: 20px;
        text-align: center;
      }
      span {
        font-size: 20px;
        font-weight: 800;
        color: #373737;
        margin-left: 12px;
      }
    }

    .song-info-user {
      justify-content: space-around;
      width: 190px;

      span:nth-child(2) {
        max-width: 70px;
        color: #507daf;
        /* 文字省略 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        transition: all 0.3s;
        &:hover {
          cursor: pointer;
        }
      }
    }

    .song-info-plus {
      margin-top: 12px !important;
      display: flex;
      flex-direction: column;
      align-items: baseline !important;

      .song-info-lable {
        span:nth-child(1) {
          color: #666;
        }

        span {
          color: #0b58b0;

          &:hover {
            cursor: pointer;
            color: #0263d1;
          }
        }
      }

      .song-info-num {
        margin: 4px 0;
        span:nth-child(2) {
          margin-left: 10px;
        }
      }
      .song-info-brief {
        .brief-info {
          max-width: 710px;
          /* 文字省略 */
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          transition: all 0.3s;
        }
      }
    }

    .song-info-name,
    .song-info-user,
    .song-info-handle,
    .song-info-plus {
      display: flex;
      align-items: center;
    }

    .song-info-user,
    .song-info-handle,
    .song-info-plus {
      margin-top: 10px;
    }

    .song-info-user {
      img {
        width: 25px;
        height: 25px;
        border-radius: 12px;
      }
    }
  }
}

.song-list-index-bar {
  margin-top: 10px;
  .index-bar-ul .index-bar-active {
    font-size: 18px;
  }
  .index-bar-ul {
    position: static;
    li {
      font-size: 14px;
    }
  }
}

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
}
</style>